@charset 'UTF-8';

.container {
    width: 1200px;
    margin: 0 auto;
}



@media screen and (min-width:1000px) {
    .fresh_milk_warp {
    
        .main_pic_b {
            overflow: hidden;
    
            .container {
                .title {
                    h2 {
                        font-size: 26px;
                        margin-top: 50px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                    }
                }
    
                .cons {
                    overflow: hidden;
    
                    .left {
                        width: 50%;
                        float: left;
                        background: #e7f3f9;
    
                        .con {
                            padding: 20px 20px;
    
                            a {
                                img {
                                    width: 100%;
                                    height: 559px;
    
                                }
                            }
                        }
    
                    }
                }
    
            }
        }
    
        .product {
            margin-top: 40px;
            .container {
                ul {
                    overflow: hidden;
    
                    li {
                        width: 33.33%;
                        float: left;
    
                        &:hover .mo {
                            opacity: 1;
                            transform: translateY(0);
                        }
    
                        a {
                            display: block;
                            background: #f2f7fa;
                            padding: 0 0 20px 0;
                            margin: 0 5px 10px;
                            position: relative;
                            overflow: hidden;
                            text-decoration: none;
    
                            &:hover {
                                color: #2b42a7;
                            }
    
                            .mo {
                                position: absolute;
                                padding: 20% 10% 0;
                                text-align: center;
                                left: 0;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                background: rgba(1, 64, 153, 0.95);
                                color: #fff;
                                opacity: 0;
                                transform: translateY(20%);
                                transition: 0.4s all ease;
    
                                .mo_centent {
                                    text-align: justify;
                                    margin: 20px 0;
                                }
    
                                .mo_span {
                                    margin-top: 20px;
    
                                    span {
                                        display: inline-block;
                                        border: 2px solid #fff;
                                        color: #fff;
                                        border-radius: 100px;
                                        padding: 3px 10px;
                                    }
                                }
                            }
    
                            .cons {
                                text-align: center;
                                padding: 20px;
    
                                img {
                                    width: 100%;
                                    height: 352px;
                                }
    
                                .con {
                                    font-size: 16px;
                                    color: #024199;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:750px) {
    html {
        font-size: calc(100vw/7.5);
    }
    .container {
        width: 355px;
        margin: 0 auto;
        overflow: hidden;
    }

    .fresh_milk_warp {
        overflow: hidden;
    
        .main_pic_b {
            overflow: hidden;
            margin-top: 150px;
    
            .container {
                padding-left: 0;
                padding-right: 0;
                .title {
                    h2 {
                        font-size: 22px;
                        margin-top: 20px;
                        margin-bottom: 30px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                    }
                }
    
                .cons {
                    overflow: hidden;
                    padding-top: 20px;
    
                    .left {
                        // width: 50%;
                        // float: left;
                        background: #e7f3f9;
    
                        .con {
                            padding: 20px 20px;
    
                            a {
                                img {
                                    width: 100%;
                                    height: 315px;
    
                                }
                            }
                        }
    
                    }
                }
    
            }
        }
    
        .product {
            margin-top: 40px;
            .container {
                padding-left: 0;
                padding-right: 0;
                ul {
                    overflow: hidden;
    
                    li {
                        width: 50%;
                        float: left;
    
                        // &:hover .mo {
                        //     opacity: 1;
                        //     transform: translateY(0);
                        // }
    
                        a {
                            display: block;
                            background: #f2f7fa;
                            padding: 0 0 20px 0;
                            margin: 0 5px 10px;
                            position: relative;
                            overflow: hidden;
                            text-decoration: none;
    
                            // &:hover {
                            //     color: #2b42a7;
                            // }
    
                            .mo {
                                position: absolute;
                                padding: 20% 10% 0;
                                text-align: center;
                                left: 0;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                background: rgba(1, 64, 153, 0.95);
                                color: #fff;
                                opacity: 0;
                                transform: translateY(20%);
                                transition: 0.4s all ease;
    
                                .mo_centent {
                                    text-align: justify;
                                    margin: 20px 0;
                                }
    
                                .mo_span {
                                    margin-top: 20px;
    
                                    span {
                                        display: inline-block;
                                        border: 2px solid #fff;
                                        color: #fff;
                                        border-radius: 100px;
                                        padding: 3px 10px;
                                    }
                                }
                            }
    
                            .cons {
                                text-align: center;
                                padding: 20px;
    
                                img {
                                    // width: 100%;
                                    width: 132px;
                                    height: 132px;
                                }
    
                                .con {
                                    font-size: 15px;
                                    color: #024199;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}